<template>
    <split-horizontal>
        <template v-slot:header-p>
            <div class="j-title">
                <span>@指令（v-JMention）</span>
                <div class="j-detail">
                    vue指令一键配置@功能，支持版本 ^0.9.1
                </div>
            </div>
        </template>
        <template v-slot:left-p>
            <div class="content">
                <div
                    v-JMention:params="params"
                    class="input-content"
                    mentionList="mentionList"
                ></div>
            </div>
        </template>
        <template v-slot:right-p>
            <div style="width: 100%">
                <pre v-highlight>
                <code class="vue">
                    <div v-text="code"></div>
                </code>
            </pre>
            </div>
        </template>
    </split-horizontal>
</template>
<script>
import { mixinForView } from "@/mixins/index.js";
export default {
    name: "JMentionView",
    components: {},
    mixins: [mixinForView],
    data() {
        return {
            code: "",
            textStyle: {
                borderBottom: "1px dotted skyblue",
                fontSize: "large",
                color: "skyblue",
            },
            toolTipStyle: {
                backgroundColor: "grey",
                color: "skyblue",
                width: "100px",
            },
            tableData: [],
            mentionList: [],
            params: {
                list: [
                    {
                        id: 1,
                        name: "张三",
                    },
                    {
                        id: 2,
                        name: "李四",
                    },
                    {
                        id: 3,
                        name: "王五",
                    },
                ],
            },
        };
    },
    created() {
        this.initCodeContent();
    },
    mounted() {},
    methods: {
        initCodeContent() {
            this.code = `
<div class="content">
    <div
        v-JMention:params="params"
        class="input-content"
        mentionList="mentionList"
    ></div>
</div>

export default{
    data(){
        return {
            params: {
                list: [
                    {
                        id: 1,
                        name: "张三",
                    },
                    {
                        id: 2,
                        name: "李四",
                    },
                    {
                        id: 3,
                        name: "王五",
                    },
                ],
            },
            mentionList: [],
        }
    }
}
            `;
        },
    },
};
</script>
<style scoped lang="less">
.title {
    font-size: x-large;
    text-align: left;
    margin-bottom: 1rem;
    .detail {
        font-size: medium;
        color: dimgrey;
        margin-top: 1rem;
    }
}
.content {
    margin: auto auto;
    .input-content {
        width: 300px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
    }
    .div-content {
        width: 300px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        margin-top: 1em;
    }
}
.header {
    min-height: 4rem;
    text-align: center;
}
.footer {
    margin-top: 2rem;
    margin-left: 2%;
    width: 95%;
}
</style>
